<template>
  <div class="app-container">
    <el-card class="box-card" shadow="never">
      <el-row :gutter="20">
        <el-col :span="4"><el-input size="mini"></el-input> </el-col>
        <el-col :span="4"><el-input size="mini"></el-input> </el-col>
        <el-col :span="4"><el-input size="mini"></el-input> </el-col>
        <el-col :span="6">
          <el-button type="primary" size="mini" @click="add()"
            >立即创建</el-button
          >
          <el-button type="primary" size="mini" @click="search()"
            >搜索</el-button
          >
        </el-col>
      </el-row>
    </el-card>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      style="margin-top: 1%"
    >
      <el-table-column label="楼宇名称" align="center" width="200">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="地址" align="center">
        <template slot-scope="scope">
          {{ scope.row.address }}
        </template>
      </el-table-column>

      <el-table-column label="类型" align="center">
        <template slot-scope="scope">
          {{ (scope.row.type = 1 ? "正常" : "停用") }}
        </template>
      </el-table-column>

      <el-table-column label="房间" align="center" width="500">
        <template slot-scope="scope">       
          <el-tag v-for="tag in scope.row.roomList" :key="tag.id" :type="tag.type" size="mini">
            {{ tag.name }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center">
         2025-09-10 16:05:21
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="handlerDetails(scope.row.id)"
            >详情</el-button
          >
          <el-button type="success" size="mini" @click="addPark(scope.row.id)"
            >添加房间</el-button
          >
          <el-button type="danger" size="mini">停用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="where.currentPage"
        :page-sizes="[10,15, 20, 30, 50]"
        :page-size="total"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogDetailsVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-table :data="buildingVoList" style="width: 100%">
        <el-table-column prop="name" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="type" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.name" placeholder="楼宇名称"></el-input>
        </el-form-item>
        <el-form-item label="楼宇状态">
          <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getbuildingList, addPark, getParbyId } from "@/api/room";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      dialogVisible: false,
      dialogDetailsVisible: false,
      list: null,
      listLoading: true,
      where: {
        pageSize: 15,
        currentPage: 1,
      },
      currentPage4: 1,
      total: 20,
      form: {
        name: "",
        parkId: null,
        delivery: true,
        type: 1,
      },
      buildingVoList: [],
    };
  },
  created() {
    this.fetchData(this.where);
  },
  methods: {
    fetchData(obj) {
      this.listLoading = true;
      getbuildingList(obj).then((response) => {
        this.listLoading = false;
        this.list = response.data;
        this.total = response.count;
      });
    },
    search() {
      this.fetchData(this.where);
    },
    add() {},
    handleSizeChange() {},
    handleCurrentChange() {},
    handlerDetails(id) {
      console.log(id);
      getParbyId(id).then((res) => {
        console.log(res);
        this.dialogDetailsVisible = true;
        this.buildingVoList = res.data.buildingVoList;
      });
    },
    addPark(id) {
      this.dialogVisible = true;
      this.form.parkId = id;
    },
    handleClose() {
      this.dialogVisible = false;
      this.dialogDetailsVisible = false;
    },
    onSubmit() {
      addPark(this.form).then(() => {
        this.dialogVisible = false;
        this.fetchData(this.where);
      });
    },
  },
};
</script>
